/**
 * Created with IntelliJ IDEA.
 * User: seth.yang
 * Date: 15-2-5
 * Time: 下午6:14
 * To change this template use File | Settings | File Templates.
 */
if (!$.fn.CustomUI) {
    $.include2 ('custom-ui.css');
    $.fn.CustomUI = {};
    (function ($) {
        function r () {return false;}
        function createInlineBlock (label, parent, index, title, classes) {
            var div = $('<div/>').addClass ('cui-inner-block').appendTo (parent).on ('selectstart', r);
            label.appendTo (div);
            classes = classes || [];
            if (!(classes instanceof Array)) {
                classes = [classes];
            }
            for (var i = 0; i < classes.length; i ++) {
                div.addClass (classes [i]);
            }
            if (index > 0) {
                div.addClass ('cui-left-margin-10');
            }
            if (title) {
                div.attr ('title', title);
            }
            return div;
        }

        function input2Label (input) {
            var id = $(input).attr ('id'), label = $('label[for=' + id + ']');
            return label.length ? label : null;
        }

        function label2Input (label) {
            var input = $('#' + $(label).attr ('for'));
            return input.length ? input : null;
        }

        $.fn.wrappedInput = function (options) {
            options = options || {};
            return this.each (function (index) {
                var parent = $(this).parent ();
                var label = this.tagName == 'LABEL' ? $(this) : input2Label (this),
                    target = this.tagName == 'INPUT' ? $(this) : label2Input (this),
                    text = label.text (),
                    div = createInlineBlock (label, parent, index, label.attr ('title'), 'cui-wrapped-text')
                        .on ('click', function () {
                        target.focus ();
                    });
                label.addClass ('cui-pr5 cui-inline-block');
                target.appendTo (div).addClass ('cui-no-outline');
                if (!('autocomplete' in options) || !options['autocomplete']) {
                    target.attr ({autocomplete:'off'});
                }
                if (('inline' in options) && options ['inline']) {
                    div.addClass ('cui-inline-block');
                }
            });
        };
        $.fn.customCheckbox = function () {
            return this.each (function (index) {
                var self = $(this).addClass ('cui-inner-block cui-inline-block cui-checkbox'),
                    target = $('#' + self.attr ('for'))[0];
                $(target).hide ().on ('click', function () {
                    if (this.checked) {
                        self.addClass ('cui-checkbox-checked');
                    } else {
                        self.removeClass ('cui-checkbox-checked');
                    }
                });
                self.on ('selectstart', r).on ('click', function (e) {
                    e.stopPropagation ();
                    $(target).trigger ('click');
                    return false;
                });
                if (target.checked) self.addClass ('cui-checkbox-checked');
                if (index > 0) self.addClass ('cui-left-margin-10');
            });
        };
        $.fn.customTab = function (options) {
            var panel = new TabPanel ('TabPanel-' + Math.random().toString ().substring (2)),
                root = $('<div/>').addClass ('cui-tab-root').appendTo (this.parent ());
            options = options || {};
            if (!this.length) return null;

            this.each (function (index) {
                var label = this.tagName == 'LABEL' ? $(this) : input2Label (this),
                    target = (this.tagName == 'INPUT' ? $(this) : label2Input (this)).attr ('data-tab-index', index);
                label.addClass ('cui-tab cui-left-margin-10');
                panel.addTab ({name: target.id,target: target,ui:label,owner:panel});
                $(target).hide ().on ('click', function () {
                    var index = Number ($(this).attr ('data-tab-index'));
                    for (var i = 0 ; i < panel.tabs.length; i ++) {
                        if (index == i) {
                            panel.tabs [i].ui.addClass ('cui-tab-selected');
                            panel.selectedIndex = i;
                        } else {
                            panel.tabs [i].ui.removeClass ('cui-tab-selected');
                        }
                    }
                    if ('onchange' in options) {
                        options ['onchange'].call (panel, {sender:panel});
                    }
                });
                label.appendTo (root).on ('selectstart', r).on ('click', function (e) {
                    e.stopPropagation ();
                    if ('beforechange' in options) {
                        var ret = options ['beforechange'].call (panel, {sender: panel,tabIndex: index});
                        if (undefined == ret || ret) {
                            $(target).trigger ('click');
                        }
                    } else
                        $(target).trigger ('click');
                    return false;
                });
                if (target.is (':checked')) {
                    label.addClass ('cui-tab-selected');
                    panel.selectedIndex = index;
                }
            });
            $('<div/>').addClass ('clear').appendTo (root);
            return panel;
        };
        $.fn.mapping = function (options) {

        };
        var TabPanel = function (name) {
            if (name) this.name = name;
            this.tabs = [];
        };
        TabPanel.prototype = {
            addTab : function (tab) {
                this.tabs.push (tab);
            }
        };
    }) (jQuery);
}